<template>
    <!-- eslint-disable -->
    <div class="slider">
        <input
            type="range"
            v-model="rangeValue"
            :disabled="disabled"
            :step="step"
            :min="min"
            :max="max"
            @mouseenter="handleEnter"
            @mouseleave="handleBlur"
        >
        <div>{{rangeValue}}</div>
    </div>
</template>
<script>
export default {
	data() {
		return {
			rangeValue: 0,
			circleClass: [],
			isShow: false
		}
	},
	props: {
		range: {
			type: Number,
			default: 0
		},
		disabled: {
			type: Boolean,
			default: false
		},
		step: {
			type: Number,
			default: 5
		},
		min: {
			type: Number,
			default: 0
		},
		max: {
			type: Number,
			default: 100
		}
	},
	mounted() {
		this.rangeValue = this.range
	},
	methods: {
		handleEnter() {
			this.circleClass.push('c1')
			this.isShow = true
		},
		handleBlur() {
			this.circleClass.pop()
			this.isShow = false
		}
	},
	watch: {
		rangeValue(val) {
			this.$emit('update:range', val)
		}
	}
}
</script>
<style  scoped>
</style>